<template>
  <!-- 定义一个用于容纳Mars3D三维地图的div容器 -->
  <div id="mars3dContainer" style="width: 100%; height: 100%" class="map-container"></div>
</template>

<script>
// 由于某些情况下无法直接使用ES模块的方式导入mars3d，这里使用全局对象window.mars3d
const mars3d = window.mars3d;
export default {
  // Vue组件的状态数据
  data() {
    return {
      // map: null, // 用于保存 mars3d.Map 三维地图对象
      mapOptions: {
        // 地图场景的配置项
        scene: {
          center: { lat: 31.654916, lng: 117.08278, alt: 279, heading: 316, pitch: -29 }, // 地图中心的初始位置
        },
      },
      url:"@/assets/data/tiles/tileset.json",
    };
  },

  // Vue生命周期钩子，在组件挂载后执行
  mounted() {
    this.initMap(); // 调用初始化地图的方法
  },

  methods: {
    // 初始化地图的方法
    initMap() {
      // const tiles =reqiure("./test.json")
      // 使用 mars3d.Map 创建三维地图，绑定到 div#mars3dContainer 容器
      this.map = new mars3d.Map("mars3dContainer", this.mapOptions);
     
      // 固定光照，避免模型亮度因时间变化而变化
      this.map.fixedLight = true;

      // 创建一个3D Tiles图层，用于显示工业厂区模型
      const tiles3dLayer = new mars3d.layer.TilesetLayer({
        type: "3dtiles", // 图层类型为3D Tiles
        name: "石化工厂", // 图层名称
        // url: "//data.mars3d.cn/3dtiles/max-shihua/tileset.json", // 3D Tiles资源的URL
        url: "/src/assets/data/tiles/tileset.json", // 3D Tiles资源的URL
        position: { lng: 117.077158, lat: 31.659116, alt: -2.0 }, // 模型的位置
        maximumScreenSpaceError: 1, // 渲染精度设置
        highlight: { type: "click", color: "#00ffff" }, // 点击时高亮显示
        popup: "all", // 设置点击后显示所有属性
      });

      // 将创建的3D Tiles图层添加到地图中
      this.map.addLayer(tiles3dLayer);

      // 绑定图层的单击事件，当用户点击3D Tiles图层时触发
      tiles3dLayer.on(mars3d.EventType.click, (event) => {
        console.log("单击了3dtiles图层", event); // 在控制台打印点击事件信息
      });
    },
  },

  // Vue生命周期钩子，在组件销毁前执行
  beforeDestroy() {
    // 如果地图对象存在，销毁地图以释放资源
    if (this.map) {
      this.map.destroy();
      this.map = null;
    }
  },
};
</script>

<style scoped>
/* scoped样式确保只影响当前组件 */
.map-container {
  background-color: rgb(255, 127, 155);
}
</style>
